<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息查询 - 毕业招聘系统</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 信息查询页面特定样式 */
        .container {
            padding: 20px;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: var(--primary);
            padding: 15px 0;
            margin-bottom: 20px;
        }
        .nav-container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-links {
            display: flex;
            gap: 20px;
        }
        .nav-btn {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            background-color: #3498db;
            transition: background-color 0.3s;
        }
        .nav-btn:hover {
            background-color: #2980b9;
        }
        /* 查询区域样式 */
        .query-section {
            background-color: #f8f8f8;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* 选项卡样式 */
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .tab-btn {
            padding: 10px 20px;
            background-color: #e0e0e0;
            border: none;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            margin-right: 5px;
            transition: background-color 0.3s;
        }
        .tab-btn.active {
            background-color: #3498db;
            color: white;
        }
        .tab-btn:hover:not(.active) {
            background-color: #d0d0d0;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        /* 表单样式 */
        .query-form {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            align-items: end;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #3498db;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #2980b9;
        }
        .form-actions {
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        /* 结果区域样式 */
        .results-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }
        .result-header {
            background-color: #f0f0f0;
            padding: 15px;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
        }
        .result-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        .result-item:last-child {
            border-bottom: none;
        }
        .result-info {
            flex: 1;
        }
        .result-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .result-meta {
            color: #666;
            font-size: 0.9em;
        }
        /* 统计查询样式 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 20px;
        }
        .stat-card {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 2em;
            font-weight: bold;
            color: #3498db;
            margin: 10px 0;
        }
        .chart-container {
            height: 300px;
            background-color: #f8f8f8;
            border-radius: 8px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="nav-container">
            <div class="logo">毕业招聘系统</div>
            <div class="nav-links">
                <a href="index.html" class="nav-btn">首页</a>
                <a href="info-query.html" class="nav-btn active">信息查询</a>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 查询区域 -->
        <div class="query-section">
            <h2>信息查询</h2>
            <!-- 选项卡导航 -->
            <div class="tabs">
                <button class="tab-btn active" data-tab="job-query">职位查询</button>
                <button class="tab-btn" data-tab="resume-query">简历查询</button>
                <button class="tab-btn" data-tab="history-query">历史记录</button>
                <button class="tab-btn" data-tab="stats-query">统计查询</button>
            </div>
            <!-- 职位查询tab内容 -->
            <div class="tab-content active" id="job-query">
                <form id="job-query-form" class="query-form">
                    <div class="form-group">
                        <label for="job-keyword">关键词</label>
                        <input type="text" id="job-keyword" name="keyword" placeholder="职位名/描述/要求...">
                    </div>
                    <div class="form-group">
                        <label for="job-company">公司名</label>
                        <input type="text" id="job-company" name="company" placeholder="公司名">
                    </div>
                    <div class="form-group">
                        <label for="job-salaryMin">最低薪资</label>
                        <input type="number" id="job-salaryMin" name="salaryMin" min="0" placeholder="最低薪资">
                    </div>
                    <div class="form-group">
                        <label for="job-salaryMax">最高薪资</label>
                        <input type="number" id="job-salaryMax" name="salaryMax" min="0" placeholder="最高薪资">
                    </div>
                    <div class="form-group">
                        <label for="job-industry">行业</label>
                        <select id="job-industry" name="industry">
                            <option value="">不限</option>
                            <option value="信息技术">信息技术</option>
                            <option value="金融">金融</option>
                            <option value="教育">教育</option>
                            <option value="制造业">制造业</option>
                            <option value="服务业">服务业</option>
                            <option value="医疗">医疗</option>
                            <option value="建筑">建筑</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="job-location">地区</label>
                        <select id="job-location" name="location">
                            <option value="">不限</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                            <option value="杭州">杭州</option>
                            <option value="成都">成都</option>
                            <option value="武汉">武汉</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="job-experience">经验要求</label>
                        <select id="job-experience" name="experience">
                            <option value="">不限</option>
                            <option value="应届毕业生">应届毕业生</option>
                            <option value="1年以内">1年以内</option>
                            <option value="1-3年">1-3年</option>
                            <option value="3-5年">3-5年</option>
                            <option value="5-10年">5-10年</option>
                            <option value="10年以上">10年以上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="job-education">学历要求</label>
                        <select id="job-education" name="education">
                            <option value="">不限</option>
                            <option value="大专">大专</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn">查询</button>
                        <button type="reset" class="btn" style="background:#aaa;">重置</button>
                    </div>
                </form>
                <div class="results-section" id="job-results">
                    <!-- 查询结果将在这里渲染 -->
                </div>
            </div>
            
            <!-- 简历查询表单 -->
            <div class="tab-content" id="resume-query">
                <form class="query-form">
                    <div class="form-group">
                        <label for="resume-name">姓名</label>
                        <input type="text" id="resume-name" placeholder="求职者姓名">
                    </div>
                    <div class="form-group">
                        <label for="resume-major">专业</label>
                        <input type="text" id="resume-major" placeholder="所学专业">
                    </div>
                    <div class="form-group">
                        <label for="resume-education">学历</label>
                        <select id="resume-education">
                            <option value="">不限</option>
                            <option value="bachelor">本科</option>
                            <option value="master">硕士</option>
                            <option value="doctor">博士</option>
                            <option value="college">大专</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="resume-skills">专业技能</label>
                        <input type="text" id="resume-skills" name="skills" placeholder="如：JavaScript, Python">
                    </div>
                    <div class="form-group">
                        <label for="resume-experience">工作经验</label>
                        <select id="resume-experience" name="experience">
                            <option value="">不限</option>
                            <option value="fresh">应届毕业生</option>
                            <option value="1y">1年以内</option>
                            <option value="1y-3y">1-3年</option>
                            <option value="3y+">3年以上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="resume-skill">专业技能</label>
                        <input type="text" id="resume-skill" placeholder="技能关键词，如：Java, Python">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn">查询</button>
                        <button type="reset" class="btn" style="background-color: #95a5a6;">重置</button>
                    </div>
                </form>
            </div>
            
            <!-- 历史记录查询表单 -->
            <div class="tab-content" id="history-query">
                <form class="query-form">
                    <div class="form-group">
                        <label for="history-type">查询类型</label>
                        <select id="history-type">
                            <option value="">全部类型</option>
                            <option value="job">职位查询</option>
                            <option value="resume">简历查询</option>
                            <option value="stats">统计查询</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="history-start">开始日期</label>
                        <input type="date" id="history-start">
                    </div>
                    <div class="form-group">
                        <label for="history-end">结束日期</label>
                        <input type="date" id="history-end">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn">查询</button>
                        <button type="button" class="btn" style="background-color: #e74c3c;">清除历史</button>
                    </div>
                </form>
            </div>
            
            <!-- 统计查询表单 -->
            <div class="tab-content" id="stats-query">
                <form class="query-form">
                    <div class="form-group">
                        <label for="stats-type">统计类型</label>
                        <select id="stats-type">
                            <option value="job-count">职位数量统计</option>
                            <option value="industry-distribution">行业分布统计</option>
                            <option value="salary-level">薪资水平统计</option>
                            <option value="application-stats">申请情况统计</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="stats-time">时间范围</label>
                        <select id="stats-time">
                            <option value="week">近一周</option>
                            <option value="month">近一个月</option>
                            <option value="quarter">近三个月</option>
                            <option value="year">近一年</option>
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    <div class="form-group" id="custom-date-range" style="display: none;">
                        <label>自定义日期范围</label>
                        <div style="display: flex; gap: 10px;">
                            <input type="date" id="stats-start">
                            <input type="date" id="stats-end">
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn">生成统计</button>
                        <button type="button" class="btn" style="background-color: #2ecc71;">导出数据</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 结果区域 -->
        <div class="results-section">
            <div class="result-header">
                <span>职位查询结果</span>
                <span>共找到 3 条记录</span>
            </div>
            <div class="result-item">
                <div class="result-info">
                    <div class="result-title">软件工程师 - 科技有限公司</div>
                    <div class="result-meta">行业：信息技术 | 地点：北京 | 薪资：15k-25k | 经验要求：1-3年</div>
                </div>
            </div>
            <div class="result-item">
                <div class="result-info">
                    <div class="result-title">财务分析师 - 金融投资公司</div>
                    <div class="result-meta">行业：金融 | 地点：上海 | 薪资：12k-20k | 经验要求：1-3年</div>
                </div>
            </div>
            <div class="result-item">
                <div class="result-info">
                    <div class="result-title">英语教师 - 教育培训学校</div>
                    <div class="result-meta">行业：教育 | 地点：广州 | 薪资：8k-15k | 经验要求：应届毕业生</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 选项卡切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            const statsTypeSelect = document.getElementById('stats-type');
            const customDateRange = document.getElementById('custom-date-range');
            const resultsHeader = document.querySelector('.result-header span:first-child');
            const resultsCount = document.querySelector('.result-header span:last-child');
            const resultsSection = document.querySelector('.results-section');
            const resultsItems = document.querySelector('.results-section .result-item').parentNode;

            // 选项卡切换
            tabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');

                    // 更新按钮状态
                    tabBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    // 更新内容区域
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(tabId).classList.add('active');

                    // 更新结果区域标题
                    updateResultsHeader(tabId);
                });
            });

            // 统计类型变更事件
            if (statsTypeSelect) {
                statsTypeSelect.addEventListener('change', function() {
                    if (this.value === 'custom') {
                        customDateRange.style.display = 'block';
                    } else {
                        customDateRange.style.display = 'none';
                    }
                });
            }

            // 更新结果区域标题和内容
            function updateResultsHeader(tabId) {
                switch(tabId) {
                    case 'job-query':
                        resultsHeader.textContent = '职位查询结果';
                        resultsCount.textContent = '共找到 3 条记录';
                        resultsItems.innerHTML = `
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">软件工程师 - 科技有限公司</div>
                                    <div class="result-meta">行业：信息技术 | 地点：北京 | 薪资：15k-25k | 经验要求：1-3年</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">财务分析师 - 金融投资公司</div>
                                    <div class="result-meta">行业：金融 | 地点：上海 | 薪资：12k-20k | 经验要求：1-3年</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">英语教师 - 教育培训学校</div>
                                    <div class="result-meta">行业：教育 | 地点：广州 | 薪资：8k-15k | 经验要求：应届毕业生</div>
                                </div>
                            </div>
                        `;
                        break;
                    case 'resume-query':
                        resultsHeader.textContent = '简历查询结果';
                        resultsCount.textContent = '共找到 3 条记录';
                        resultsItems.innerHTML = `
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">张三 - 计算机科学与技术</div>
                                    <div class="result-meta">学历：本科 | 毕业院校：北京大学 | 工作经验：应届毕业生 | 技能：Java, Python, 数据库</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">李四 - 金融学</div>
                                    <div class="result-meta">学历：硕士 | 毕业院校：复旦大学 | 工作经验：1-3年 | 技能：财务分析, 投资管理</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">王五 - 英语语言文学</div>
                                    <div class="result-meta">学历：本科 | 毕业院校：北京师范大学 | 工作经验：应届毕业生 | 技能：英语专业八级, 教学经验</div>
                                </div>
                            </div>
                        `;
                        break;
                    case 'history-query':
                        resultsHeader.textContent = '查询历史记录';
                        resultsCount.textContent = '共找到 5 条记录';
                        resultsItems.innerHTML = `
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">职位查询 - 软件工程师</div>
                                    <div class="result-meta">查询时间：2023-11-15 14:30 | 结果数量：3条</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">简历查询 - 计算机专业</div>
                                    <div class="result-meta">查询时间：2023-11-14 09:15 | 结果数量：5条</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">统计查询 - 职位数量统计</div>
                                    <div class="result-meta">查询时间：2023-11-12 16:45 | 时间范围：近一个月</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">职位查询 - 财务分析师</div>
                                    <div class="result-meta">查询时间：2023-11-10 11:20 | 结果数量：2条</div>
                                </div>
                            </div>
                            <div class="result-item">
                                <div class="result-info">
                                    <div class="result-title">简历查询 - 金融学</div>
                                    <div class="result-meta">查询时间：2023-11-08 15:10 | 结果数量：4条</div>
                                </div>
                            </div>
                        `;
                        break;
                    case 'stats-query':
                        resultsHeader.textContent = '统计查询结果';
                        resultsCount.textContent = '职位数量统计 - 近一个月';
                        resultsItems.innerHTML = `
                            <div class="stats-container">
                                <div class="stat-card">
                                    <div class="stat-label">总职位数</div>
                                    <div class="stat-value">128</div>
                                    <div class="stat-desc">较上月增长 12%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-label">活跃企业数</div>
                                    <div class="stat-value">45</div>
                                    <div class="stat-desc">较上月增长 8%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-label">平均薪资</div>
                                    <div class="stat-value">15.6k</div>
                                    <div class="stat-desc">较上月增长 3%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-label">简历投递量</div>
                                    <div class="stat-value">856</div>
                                    <div class="stat-desc">较上月增长 15%</div>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div>行业分布统计图表（此处应显示图表）</div>
                            </div>
                        `;
                        break;
                }
            }
        });
    </script>
    <!-- 页面底部引入js -->
    <script src="js/info-query.js"></script>
</body>
</html>